<!-- 游戏编辑弹窗 -->
<template>
  <el-dialog :title="isUpdate ? '修改游戏分类' : '添加游戏分类'" :visible="visible" width="1000px" :destroy-on-close="true"
    :lock-scroll="false" :before-close="confirmClose" @update:visible="updateVisible" :close-on-click-modal="false">
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <el-form-item label="游戏名称分类:" prop="name">
        <el-input v-model="form.name" placeholder="请输入游戏名称分类" clearable />
      </el-form-item>

      <el-form-item label="游戏权重:" prop="weight">
        <el-input v-model="form.weight" placeholder="请输入游戏权重" clearable />
      </el-form-item>
      <el-form-item label="排序:" prop="sort">
        <el-input type="number" v-model="form.sort" placeholder="请输入游戏分类排序" clearable />
      </el-form-item>
      <el-form-item label="是否启用:">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="2">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上架平台:" prop="device">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="游戏分类备注:" prop="note">
        <el-input v-model="form.note" placeholder="请输入备注" clearable />
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="confirmClose()">取消</el-button>
      <el-button type="primary" @click="save" :loading="loading">保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
const cityOptions = ['ios', 'android', 'pad', 'ipad', 'pc'];
export default {
  name: "GameCateEdit",
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  data() {
    return {
      // 表单数据
      form: Object.assign({ status: 1 }, this.data),
      where: {},
      // 表单验证规则
      rules: {
        name: [
          { required: true, message: "请输入游戏分类名称", trigger: "blur" }
        ],
        status: [
          {
            required: true,
            message: "请输入状态",
            trigger: "blur"
          }
        ]
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,

      checkAll: false,
      checkedCities: [],
      cities: cityOptions,
      isIndeterminate: true
    };
  },
  watch: {
    visible(val) {
      if (val) {
        if (this.data) {
          this.form = Object.assign({}, this.data);
          if (this.form.device != "" && Number(this.form.device) == 1) {
            this.checkAll = true
            this.checkedCities = this.cities
          } else if (this.form.device != 1 && this.form.device != "") {
            this.checkAll = false
            if (this.form.device === undefined) {
              this.checkAll = false
              this.checkedCities = []
            } else {
              this.form.device = this.form.device.split(',').map(Number)
              let newCheckedCities = [];
              this.form.device.forEach(item => {
                if (item === 2) {
                  newCheckedCities.push('ios')
                } else if (item === 3) {
                  newCheckedCities.push('android')
                } else if (item === 4) {
                  newCheckedCities.push('pad')
                } else if (item === 5) {
                  newCheckedCities.push('ipad')
                } else if (item === 6) {
                  newCheckedCities.push('pc')
                }
                this.checkedCities = newCheckedCities
              })
            }

          } else if (this.form.device == "") {
            this.checkAll = false
            this.checkedCities = []
          }
          this.isUpdate = true;
        } else {
          // this.form = {};
          this.initForm()
          this.isUpdate = false;
        }
      }
    }
  },
  methods: {
    /* 保存编辑 */
    save() {
      if (this.checkAll) {
        this.form.device = 1
      } else {
        let arr = []
        this.checkedCities.forEach(item => {
          if (item == 'ios') {
            arr.push(2)
          } else if (item == 'android') {
            arr.push(3)
          } else if (item == 'pad') {
            arr.push(4)
          } else if (item == 'ipad') {
            arr.push(5)
          } else if (item == 'pc') {
            arr.push(6)
          }
        })
        this.form.device = arr.join(',')
      }
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true;
          this.$http
            .post("/boxGameCate/edit", this.form)
            .then(res => {
              this.loading = false;
              if (res.data.code === 0) {
                this.$message.success(res.data.msg);
                if (!this.isUpdate) {
                  this.form = {};
                }
                this.updateVisible(false);
                this.$emit("done");
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch(e => {
              this.loading = false;
              this.$message.error(e.message);
            });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit("update:visible", value);
    },

    confirmClose() {
      this.$confirm("确定要返回吗？", "温馨提示")
        .then(() => {
          this.updateVisible(false);
          this.initForm();
        })
        .catch(() => { });
    },

    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    initForm() {
      this.checkAll = false
      this.checkedCities = [];
      this.form = {}
      return this.form
    },
  }
};
</script>

<style scoped></style>
